import React, {Component} from 'react';
import {StyleSheet, TouchableOpacity, View,} from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
import PropTypes from "prop-types";

const styles = StyleSheet.create({
    wrapper: {
        position: 'absolute',
        right: 30,
        bottom: 30,
        backgroundColor: '#98bf21',
        width: 50,
        height: 50,
        textAlign: 'center',
        alignItems: 'center',
        justifyContent: 'center',
        textAlignVertical: 'center',
        zIndex: 1234,
        borderRadius: 25,
    }
});

class FloatButton extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    static propTypes = {
        onPress: PropTypes.func,
        style: PropTypes.object,
        top: PropTypes.number,
        bottom: PropTypes.number,
        left: PropTypes.number,
        right: PropTypes.number,
        backgroundColor: PropTypes.string,
        color: PropTypes.string,
        iconName: PropTypes.string,
    };

    static defaultProps = {
        onPress: () => {
        },
        style: {},
        iconName: 'plus',
    };

    render() {
        return (
            <View style={[
                styles.wrapper,
                this.props.style,
                {
                    top: this.props.top,
                    bottom: this.props.bottom,
                    left: this.props.left,
                    right: this.props.right,
                    backgroundColor: this.props.backgroundColor,
                    color: this.props.color,
                }
            ]}>
                <TouchableOpacity
                    activeOpacity={0.3}
                    onPress={() => this.props.onPress()}
                >
                    <View>
                        <Icon name={this.props.iconName} size={22} color={'#f0f0f0'}/>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}

export default FloatButton;